<template>
  <div class="volume-slider">
    <div class="volume-icon" @click="toggleMute">
      {{ volumeIcon }}
    </div>
    <div class="slider-container">
      <input 
        type="range" 
        min="0" 
        max="100" 
        :value="modelValue"
        @input="handleInput"
        @change="handleChange"
        class="slider"
        :class="{ muted: modelValue === 0 }"
      />
      <div class="slider-track">
        <div 
          class="slider-fill" 
          :style="{ width: `${modelValue}%` }"
        ></div>
      </div>
    </div>
    <div class="volume-value">
      {{ modelValue }}%
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

/**
 * 音量滑块组件
 * 提供音量调节界面，包含静音功能
 * @component
 * @example
 * <VolumeSlider v-model="volume" />
 */

interface Props {
  modelValue: number
  min?: number
  max?: number
  step?: number
}

const props = withDefaults(defineProps<Props>(), {
  min: 0,
  max: 100,
  step: 1
})

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const previousVolume = ref(props.modelValue)

/**
 * 音量图标
 */
const volumeIcon = computed(() => {
  if (props.modelValue === 0) return '🔇'
  if (props.modelValue < 30) return '🔈'
  if (props.modelValue < 70) return '🔉'
  return '🔊'
})

/**
 * 处理滑块输入
 * @param event - 输入事件
 */
const handleInput = (event: Event): void => {
  const target = event.target as HTMLInputElement
  const value = parseInt(target.value)
  emit('update:modelValue', value)
}

/**
 * 处理滑块变化
 * @param event - 变化事件
 */
const handleChange = (event: Event): void => {
  const target = event.target as HTMLInputElement
  const value = parseInt(target.value)
  
  if (value > 0) {
    previousVolume.value = value
  }
  
  emit('update:modelValue', value)
}

/**
 * 切换静音状态
 */
const toggleMute = (): void => {
  if (props.modelValue === 0) {
    // 恢复之前的音量
    emit('update:modelValue', previousVolume.value || 50)
  } else {
    // 保存当前音量并静音
    previousVolume.value = props.modelValue
    emit('update:modelValue', 0)
  }
}
</script>

<style lang="scss" scoped>
.volume-slider {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  min-width: 200px;

  .volume-icon {
    font-size: 1.2rem;
    cursor: pointer;
    transition: $transition-fast;
    padding: $spacing-xs;
    border-radius: $border-radius-sm;

    &:hover {
      background: rgba($primary-color, 0.1);
    }
  }

  .slider-container {
    position: relative;
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;

    .slider {
      position: absolute;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: transparent;
      outline: none;
      cursor: pointer;
      z-index: 2;
      appearance: none;

      &::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: $primary-color;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: $transition-fast;

        &:hover {
          transform: scale(1.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
      }

      &::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: $primary-color;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: $transition-fast;

        &:hover {
          transform: scale(1.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
      }

      &.muted {
        &::-webkit-slider-thumb {
          background: $text-light;
        }

        &::-moz-range-thumb {
          background: $text-light;
        }
      }
    }

    .slider-track {
      position: absolute;
      width: 100%;
      height: 6px;
      background: #e0e0e0;
      border-radius: 3px;
      overflow: hidden;

      .slider-fill {
        height: 100%;
        background: linear-gradient(90deg, $primary-color, $secondary-color);
        transition: width $transition-fast;
        border-radius: 3px;
      }
    }
  }

  .volume-value {
    min-width: 40px;
    text-align: center;
    font-weight: 500;
    color: $primary-color;
    font-size: 0.9rem;
  }
}

// 响应式设计
@media (max-width: $breakpoint-sm) {
  .volume-slider {
    min-width: 150px;
    gap: $spacing-sm;

    .volume-value {
      min-width: 35px;
      font-size: 0.8rem;
    }
  }
}
</style>